<template>
  <FlexBox justify="space-between" class="decorator-box">
    <div class="left">
      <SmallRect class="rect-item" color="#52C1F2" deg="200" style="top: 30px; left: 40px" />
      <SmallRect class="rect-item" color="#FF8F00" deg="100" style="top: 10px; right: -16px"/>
      <SmallRect class="rect-item" color="#E54C4B" deg="120" style="bottom: 20px; right: 2px"/>
      <SmallRect class="rect-item" color="#00C250" deg="30" style="bottom: 30px; left: 20px"/>
    </div>
    <div class="right">
      <SmallRect class="rect-item" color="#FFDB2E" deg="200" style="top: 22px; left: -10px" />
      <SmallRect class="rect-item" color="#E54C4B" deg="100" style="top: 16px; right: 29px"/>
      <SmallRect class="rect-item" color="#FF8F00" deg="120" style="bottom: 20px; right: 16px"/>
      <SmallRect class="rect-item" color="#52C1F2" deg="30" style="bottom: 30px; left: 4px"/>
    </div>
  </FlexBox>
</template>

<script>
import FlexBox from '@components/flex-box/index.vue';
import SmallRect from '@components/small-rect/index.vue';

export default {
  name: "DecorationBox",
  components: {FlexBox, SmallRect},
  data() {
    return {}
  },
  methods: {},

  created() {

  },

  mounted() {

  }

}
</script>

<style lang="scss" scoped>
.decorator-box {
  position: absolute;
  width: 100%;
  height: 80px;

  .left {
    width: 20%;
    height: 100%;
    text-align: right;
    position: relative;
  }

  .right {
    width: 20%;
    height: 100%;
    position: relative;
  }

  .rect-item {
    position: absolute;
  }
}
</style>
